<template>
  <div class="page">
    <div class="page-header">
      <h1>知识标准管理</h1>
      <p>在线查询、浏览与学习标准与知识内容</p>
    </div>
    
    <!-- 操作控制栏 -->
    <div class="knowledge-controls">
      <div class="search-section">
        <div class="search-bar">
          <input type="text" placeholder="搜索标题、关键字或分类..." v-model="searchKeyword">
          <button class="btn btn-primary" @click="searchKnowledge">
            <i class="fas fa-search"></i>
            搜索
          </button>
        </div>
        <button class="btn btn-success" @click="showUploadModal" v-if="userStore.isAdmin">
          <i class="fas fa-plus"></i>
          上传知识
        </button>
      </div>
      
      <div class="filter-controls">
        <select v-model="typeFilter" @change="loadKnowledgeList">
          <option value="">全部类型</option>
          <option value="标准">标准</option>
          <option value="知识">知识</option>
        </select>
        <select v-model="categoryFilter" @change="loadKnowledgeList">
          <option value="">全部分类</option>
          <option value="安全管理">安全管理</option>
          <option value="设备维护">设备维护</option>
          <option value="应急预案">应急预案</option>
          <option value="操作规程">操作规程</option>
          <option value="技术标准">技术标准</option>
        </select>
        <select v-model="statusFilter" @change="loadKnowledgeList">
          <option value="">全部状态</option>
          <option value="在用">在用</option>
          <option value="已发布">已发布</option>
          <option value="废止">废止</option>
        </select>
      </div>
    </div>

    <!-- 知识库统计 -->
    <div class="stats-section" v-if="statistics">
      <div class="stat-item">
        <span class="stat-label">总计:</span>
        <span class="stat-value">{{ statistics.total_count }}</span>
      </div>
      <div class="stat-item">
        <span class="stat-label">标准:</span>
        <span class="stat-value">{{ statistics.standard_count }}</span>
      </div>
      <div class="stat-item">
        <span class="stat-label">知识:</span>
        <span class="stat-value">{{ statistics.knowledge_count }}</span>
      </div>
      <div class="stat-item">
        <span class="stat-label">在用:</span>
        <span class="stat-value">{{ statistics.active_count }}</span>
      </div>
    </div>

    <!-- 知识库列表 -->
    <div class="knowledge-grid">
      <div class="knowledge-card" v-for="item in knowledgeList" :key="item.id">
        <div class="card-header">
          <h4 @click="viewDetail(item)" class="clickable">{{ item.title }}</h4>
          <div class="card-badges">
            <span class="type-badge" :class="item.type">{{ item.type }}</span>
            <span class="file-badge" v-if="item.hasFile">
              <i class="fas fa-file-pdf" v-if="item.fileExtension === '.pdf'"></i>
              <i class="fas fa-file-alt" v-else></i>
              {{ item.fileSize }}
            </span>
          </div>
        </div>
        <div class="card-content">
          <p class="category">{{ item.category }}</p>
          <p class="summary">{{ item.summary }}</p>
          <div class="card-meta">
            <span class="upload-info">{{ item.uploader }} • {{ item.uploadDate }}</span>
            <span class="view-count">
              <i class="fas fa-eye"></i> {{ item.viewCount }}
            </span>
            <span class="status-badge" :class="getStatusClass(item.status)">
              {{ item.status }}
            </span>
          </div>
        </div>
        <div class="card-actions">
          <button class="btn btn-sm btn-primary" @click="viewDetail(item)">查看详情</button>
          <button class="btn btn-sm btn-info" @click="downloadFile(item)" v-if="item.hasFile">
            <i class="fas fa-download"></i>
            下载
          </button>
          <button class="btn btn-sm btn-danger" @click="deleteKnowledge(item)" v-if="userStore.isAdmin">
            删除
          </button>
        </div>
      </div>
    </div>

    <!-- 上传模态框 -->
    <div v-if="showModal" class="modal-overlay" @click="closeModal">
      <div class="modal-content upload-modal" @click.stop>
        <div class="modal-header">
          <h3>上传知识文件</h3>
          <button class="modal-close" @click="closeModal">&times;</button>
        </div>
        
        <div class="modal-body">
          <form @submit.prevent="uploadFile">
            <div class="form-grid">
              <div class="form-group">
                <label>标题 *</label>
                <input type="text" v-model="uploadForm.title" required>
              </div>
              <div class="form-group">
                <label>类型 *</label>
                <select v-model="uploadForm.content_type" required>
                  <option value="">请选择类型</option>
                  <option value="标准">标准</option>
                  <option value="知识">知识</option>
                </select>
              </div>
              <div class="form-group">
                <label>分类 *</label>
                <select v-model="uploadForm.category" required>
                  <option value="">请选择分类</option>
                  <option value="安全管理">安全管理</option>
                  <option value="设备维护">设备维护</option>
                  <option value="应急预案">应急预案</option>
                  <option value="操作规程">操作规程</option>
                  <option value="技术标准">技术标准</option>
                </select>
              </div>
              <div class="form-group">
                <label>关键词</label>
                <input type="text" v-model="uploadForm.keywords" placeholder="多个关键词用逗号分隔">
              </div>
              <div class="form-group full-width">
                <label>内容摘要 *</label>
                <textarea v-model="uploadForm.summary" rows="3" required></textarea>
              </div>
              <div class="form-group full-width">
                <label>详细内容</label>
                <textarea v-model="uploadForm.content" rows="6" placeholder="可选，用于在线查看"></textarea>
              </div>
              <div class="form-group full-width">
                <label>附件文件</label>
                <input ref="fileInput" type="file" @change="handleFileChange" accept=".pdf,.txt,.doc,.docx">
                <small class="file-info">支持PDF、文本文档等格式，最大50MB</small>
              </div>
            </div>
          </form>
        </div>
        
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" @click="closeModal">取消</button>
          <button type="button" class="btn btn-primary" @click="uploadFile" :disabled="isUploading">
            <i class="fas fa-spinner fa-spin" v-if="isUploading"></i>
            {{ isUploading ? '上传中...' : '上传' }}
          </button>
        </div>
      </div>
    </div>

    <!-- 详情模态框 -->
    <div v-if="showDetailModal" class="modal-overlay" @click="closeDetailModal">
      <div class="modal-content detail-modal" @click.stop>
        <div class="modal-header">
          <h3>{{ currentDetail?.title }}</h3>
          <button class="modal-close" @click="closeDetailModal">&times;</button>
        </div>
        
        <div class="modal-body" v-if="currentDetail">
          <div class="detail-info">
            <div class="info-grid">
              <div class="info-item">
                <label>类型:</label>
                <span class="type-badge" :class="currentDetail.type">{{ currentDetail.type }}</span>
              </div>
              <div class="info-item">
                <label>分类:</label>
                <span>{{ currentDetail.category }}</span>
              </div>
              <div class="info-item">
                <label>状态:</label>
                <span class="status-badge" :class="getStatusClass(currentDetail.status)">{{ currentDetail.status }}</span>
              </div>
              <div class="info-item">
                <label>浏览次数:</label>
                <span>{{ currentDetail.viewCount }}</span>
              </div>
              <div class="info-item">
                <label>上传人:</label>
                <span>{{ currentDetail.uploader }}</span>
              </div>
              <div class="info-item">
                <label>上传时间:</label>
                <span>{{ currentDetail.uploadDate }}</span>
              </div>
            </div>
            
            <div class="detail-content">
              <h4>内容摘要</h4>
              <p class="summary-text">{{ currentDetail.summary }}</p>
              
              <div v-if="currentDetail.keywords" class="keywords-section">
                <h4>关键词</h4>
                <div class="keywords">
                  <span class="keyword-tag" v-for="keyword in currentDetail.keywords.split(',')" :key="keyword.trim()">
                    {{ keyword.trim() }}
                  </span>
                </div>
              </div>
              
              <div v-if="currentDetail.content" class="content-section">
                <h4>详细内容</h4>
                <div class="content-text">{{ currentDetail.content }}</div>
              </div>
              
              <div v-if="currentDetail.fileUrl" class="file-section">
                <h4>附件文件</h4>
                <div class="file-info-box">
                  <div class="file-icon">
                    <i class="fas fa-file-pdf" v-if="currentDetail.fileExtension === '.pdf'"></i>
                    <i class="fas fa-file-alt" v-else></i>
                  </div>
                  <div class="file-details">
                    <div class="file-name">{{ currentDetail.fileName }}</div>
                    <div class="file-size">{{ currentDetail.fileSize }}</div>
                  </div>
                  <button class="btn btn-primary" @click="downloadCurrentFile">
                    <i class="fas fa-download"></i>
                    下载
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useUserStore } from '../stores/user'
import { api } from '../api/index'

const userStore = useUserStore()

// 响应式数据
const searchKeyword = ref('')
const typeFilter = ref('')
const categoryFilter = ref('')
const statusFilter = ref('')
const knowledgeList = ref([])
const statistics = ref(null)
const showModal = ref(false)
const showDetailModal = ref(false)
const isUploading = ref(false)
const currentDetail = ref(null)
const selectedFile = ref<File | null>(null)
const fileInput = ref<HTMLInputElement | null>(null)

// 上传表单
const uploadForm = reactive({
  title: '',
  content_type: '',
  category: '',
  summary: '',
  keywords: '',
  content: '',
  uploader: userStore.userInfo.name
})

// 加载知识库列表
const loadKnowledgeList = async () => {
  try {
    const params = {}
    if (typeFilter.value) params.type = typeFilter.value
    if (categoryFilter.value) params.category = categoryFilter.value
    if (statusFilter.value) params.status = statusFilter.value
    if (searchKeyword.value) params.keyword = searchKeyword.value
    
    const response = await api.knowledge.getList(params)
    if (response.status === 'success') {
      knowledgeList.value = response.data
    }
  } catch (error) {
    console.error('加载知识库列表失败:', error)
    showNotification('加载知识库列表失败', 'error')
  }
}

// 加载统计信息
const loadStatistics = async () => {
  try {
    const response = await api.knowledge.getStatistics()
    if (response.status === 'success') {
      statistics.value = response.data
    }
  } catch (error) {
    console.error('加载统计信息失败:', error)
  }
}

// 搜索知识
const searchKnowledge = () => {
  loadKnowledgeList()
}

// 显示上传模态框
const showUploadModal = () => {
  showModal.value = true
  Object.assign(uploadForm, {
    title: '',
    content_type: '',
    category: '',
    summary: '',
    keywords: '',
    content: '',
    uploader: userStore.userInfo?.name || '管理员'
  })
  selectedFile.value = null
  if (fileInput.value) {
    fileInput.value.value = ''
  }
}

// 关闭上传模态框
const closeModal = () => {
  showModal.value = false
}

// 处理文件选择
const handleFileChange = (event: any) => {
  const file = event.target.files[0]
  if (file) {
    // 检查文件大小 (50MB)
    if (file.size > 50 * 1024 * 1024) {
      showNotification('文件大小不能超过50MB', 'error')
      event.target.value = ''
      return
    }
    selectedFile.value = file
  }
}

// 上传文件
const uploadFile = async () => {
  if (!uploadForm.title || !uploadForm.content_type || !uploadForm.category || !uploadForm.summary) {
    showNotification('请填写所有必填字段', 'error')
    return
  }
  
  isUploading.value = true
  
  try {
    // 确保上传人有值
    if (!uploadForm.uploader) {
      uploadForm.uploader = userStore.userInfo?.name || '管理员'
    }

    const formData = new FormData()
    formData.append('title', uploadForm.title)
    formData.append('content_type', uploadForm.content_type)
    formData.append('category', uploadForm.category)
    formData.append('summary', uploadForm.summary)
    formData.append('keywords', uploadForm.keywords || '')
    formData.append('content', uploadForm.content || '')
    formData.append('uploader', uploadForm.uploader)
    
    if (selectedFile.value) {
      formData.append('file', selectedFile.value)
    }
    
    const response = await api.knowledge.upload(formData)
    if (response.status === 'success') {
      showNotification('上传成功！', 'success')
      closeModal()
      loadKnowledgeList()
      loadStatistics()
    } else {
      // Handle response status other than success
       throw new Error(response.message || '上传未知错误')
    }
  } catch (error: any) {
    console.error('上传失败:', error)
    // 提取错误信息
    let errorMessage = '上传失败，请重试'
    if (error.message) {
      errorMessage = error.message
    }
    showNotification(errorMessage, 'error')
  } finally {
    isUploading.value = false
  }
}

// 查看详情
const viewDetail = async (item: any) => {
  try {
    const response = await api.knowledge.getDetail(item.id)
    if (response.status === 'success') {
      currentDetail.value = response.data
      showDetailModal.value = true
      
      // 更新列表中对应项目的浏览次数
      const listItem = knowledgeList.value.find(listItem => listItem.id === item.id)
      if (listItem) {
        listItem.viewCount = response.data.viewCount
      }
    }
  } catch (error) {
    console.error('获取详情失败:', error)
    showNotification('获取详情失败', 'error')
  }
}

// 关闭详情模态框
const closeDetailModal = () => {
  showDetailModal.value = false
  currentDetail.value = null
}

// 下载文件
const downloadFile = (item: any) => {
  if (item.hasFile) {
    api.knowledge.downloadFile(item.id)
  } else {
    showNotification('该条目没有附件文件', 'warning')
  }
}

// 下载当前查看的文件
const downloadCurrentFile = () => {
  if (currentDetail.value) {
    api.knowledge.downloadFile(currentDetail.value.id)
  }
}

// 删除知识
const deleteKnowledge = async (item: any) => {
  if (!confirm(`确定要删除"${item.title}"吗？此操作不可恢复。`)) {
    return
  }
  
  try {
    const response = await api.knowledge.delete(item.id)
    if (response.status === 'success') {
      showNotification('删除成功！', 'success')
      loadKnowledgeList()
      loadStatistics()
    }
  } catch (error) {
    console.error('删除失败:', error)
    showNotification('删除失败，请重试', 'error')
  }
}

// 获取状态样式类
const getStatusClass = (status: string) => {
  const classes = {
    '在用': 'success',
    '已发布': 'info',
    '废止': 'danger'
  }
  return classes[status] || 'secondary'
}

// 通知函数
const showNotification = (message: string, type: 'success' | 'error' | 'warning' | 'info' = 'info') => {
  const notification = document.createElement('div')
  notification.className = `notification ${type}`
  notification.textContent = message
  
  const colors = {
    success: '#27ae60',
    error: '#e74c3c',
    warning: '#f39c12',
    info: '#3498db'
  }
  
  notification.style.cssText = `
    position: fixed;
    top: 90px;
    right: 20px;
    background: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    z-index: 1001;
    border-left: 4px solid ${colors[type]};
    animation: slideIn 0.3s ease;
    max-width: 300px;
    font-size: 14px;
  `
  
  document.body.appendChild(notification)
  
  setTimeout(() => {
    if (notification.parentNode) {
      notification.remove()
    }
  }, 3000)
}

// 页面加载
onMounted(() => {
  loadKnowledgeList()
  loadStatistics()
})
</script>

<style scoped>
.search-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  gap: 20px;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.search-bar input {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 14px;
  transition: all 0.3s ease;
}

.search-bar input:focus {
  outline: none;
  border-color: #3498db;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 15px rgba(52, 152, 219, 0.3);
}

.search-bar input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-primary {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #2980b9, #1f5f99);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(52, 152, 219, 0.4);
}

.btn-success {
  background: linear-gradient(135deg, #27ae60, #219a52);
  color: white;
}

.btn-success:hover {
  background: linear-gradient(135deg, #219a52, #1e8449);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(39, 174, 96, 0.4);
}

.stats-section {
  display: flex;
  gap: 25px;
  margin-bottom: 30px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  border-radius: 15px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
}

.stat-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.stat-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
}

.stat-value {
  color: white;
  font-weight: bold;
  font-size: 18px;
}

.knowledge-card {
  transition: all 0.4s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(10px);
  border-radius: 15px;
  overflow: hidden;
}

.knowledge-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  border-color: rgba(52, 152, 219, 0.3);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
  padding: 20px 20px 0 20px;
}

.card-header h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: white;
  line-height: 1.3;
}

.card-header h4.clickable {
  cursor: pointer;
  transition: all 0.3s ease;
}

.card-header h4.clickable:hover {
  color: #3498db;
  text-shadow: 0 0 10px rgba(52, 152, 219, 0.3);
}

.card-badges {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.type-badge {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.type-badge.标准 {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: white;
}

.type-badge.知识 {
  background: linear-gradient(135deg, #f39c12, #e67e22);
  color: white;
}

.file-badge {
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.2), rgba(52, 152, 219, 0.1));
  color: #3498db;
  padding: 4px 10px;
  border-radius: 15px;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(52, 152, 219, 0.3);
}

.card-content {
  padding: 0 20px 15px 20px;
}

.category {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  margin-bottom: 10px;
  font-weight: 500;
}

.summary {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 15px;
}

.card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
}

.upload-info {
  color: rgba(255, 255, 255, 0.7);
}

.view-count {
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  gap: 4px;
}

.card-actions {
  padding: 15px 20px 20px 20px;
  display: flex;
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-sm {
  padding: 8px 16px;
  font-size: 13px;
  border-radius: 20px;
}

.btn-info {
  background: linear-gradient(135deg, #17a2b8, #138496);
  color: white;
}

.btn-info:hover {
  background: linear-gradient(135deg, #138496, #0f6674);
  transform: translateY(-1px);
}

.btn-danger {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: white;
}

.btn-danger:hover {
  background: linear-gradient(135deg, #c0392b, #a93226);
  transform: translateY(-1px);
}

.btn-secondary {
  background: linear-gradient(135deg, #6c757d, #5a6268);
  color: white;
}

.btn-secondary:hover {
  background: linear-gradient(135deg, #5a6268, #495057);
  transform: translateY(-1px);
}

.upload-modal {
  max-width: 900px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.9));
  backdrop-filter: blur(20px);
}

.modal-header {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  padding: 20px;
  border-radius: 20px 20px 0 0;
}

.modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.modal-close {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.modal-body {
  padding: 25px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #2c3e50;
  font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  font-size: 14px;
  transition: all 0.3s ease;
  background: white;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.file-info {
  display: block;
  margin-top: 8px;
  color: #666;
  font-size: 12px;
  font-style: italic;
}

.detail-modal {
  max-width: 900px;
  max-height: 90vh;
  overflow-y: auto;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-bottom: 30px;
  padding: 20px;
  background: rgba(248, 249, 250, 0.8);
  border-radius: 8px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.info-item label {
  font-size: 12px;
  color: #666;
  font-weight: 500;
}

.detail-content h4 {
  color: #2c3e50;
  margin: 20px 0 10px 0;
  font-size: 16px;
  border-bottom: 2px solid #3498db;
  padding-bottom: 5px;
}

.summary-text, .content-text {
  line-height: 1.6;
  color: #333;
  margin-bottom: 15px;
}

.keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
}

.keyword-tag {
  background: #3498db;
  color: white;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
}

.file-info-box {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background: rgba(248, 249, 250, 0.8);
  border-radius: 8px;
  border: 2px dashed #ddd;
}

.file-icon {
  font-size: 24px;
  color: #e74c3c;
}

.file-details {
  flex: 1;
}

.file-name {
  font-weight: 500;
  margin-bottom: 5px;
}

.file-size {
  color: #666;
  font-size: 14px;
}

.status-badge.success {
  background: rgba(39, 174, 96, 0.1);
  color: #27ae60;
}

.status-badge.info {
  background: rgba(52, 152, 219, 0.1);
  color: #3498db;
}

.status-badge.danger {
  background: rgba(231, 76, 60, 0.1);
  color: #e74c3c;
}

.status-badge.secondary {
  background: rgba(108, 117, 125, 0.1);
  color: #6c757d;
}

.modal-footer {
  padding: 20px 25px;
  background: #f8f9fa;
  border-radius: 0 0 20px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 15px;
}

.filter-controls {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-top: 15px;
}

.filter-controls select {
  padding: 10px 15px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-controls select:focus {
  outline: none;
  border-color: #3498db;
  background: rgba(255, 255, 255, 0.15);
}

.filter-controls select option {
  background: #2c3e50;
  color: white;
}

@media (max-width: 768px) {
  .search-section {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }
  
  .stats-section {
    flex-direction: column;
    gap: 15px;
  }
  
  .stat-item {
    justify-content: center;
  }
  
  .form-grid {
    grid-template-columns: 1fr;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .file-info-box {
    flex-direction: column;
    text-align: center;
  }
  
  .card-actions {
    flex-direction: column;
    gap: 8px;
  }
  
  .filter-controls {
    flex-direction: column;
    gap: 10px;
  }
  
  .filter-controls select {
    width: 100%;
  }
}
</style>
